<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
  <title>个人简历</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      background: #eee;
      margin: 20px 0;
    }

    article {
      width: 21cm;
      min-height: 29.7cm;
      background: white;
      margin: 0 auto;
      overflow: auto;
      padding: 1em;
    }
  </style>
  <style media="print">
    body {
      margin: 0;
    }

    .page2 {
      page-break-before: always;
      margin-top: 30px;
    }
  </style>
  <style>
    p {
      margin: 0.3em 0;
    }

    h1 {
      font-size: 25px;
      margin-top: 0;
    }

    h4,
    h5,
    h6 {
      font-weight: normal;
    }

    ol,
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    strong {
      font-weight: normal;
      color: #f60;
    }

    a {
      color: #999;
      text-decoration: none;
      border-bottom: 1px solid;
    }

    p,
    li {
      color: #666;
    }

    strong {
      font-weight: normal;
    }

    h3,
    h4,
    h5,
    h6 {
      margin: 0;
    }

    h4 {
      display: inline;
      font-weight: bolder;
    }

    .bio {
      position: relative;
    }

    .bio img {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>

  <style>
    .projects {}

    .projects p {
      color: #666;
    }

    .projects strong {
      color: #f60;
    }

    .projects>ol {
      margin-top: 0;
      list-style-position: inside;
      padding: 0;
    }

    .projects>ol>li {
      margin-bottom: 24px;
    }

    /* .projects > ol > li:last-child {
        margin-bottom: 120px;
      } */
    .projects>ol>li>header {
      display: flex;
      justify-content: space-between;
    }

    .projects>ol>li h3 {
      display: inline-block;
    }
  </style>
  <style>
    .skills {}

    #skills {
      width: 500px;
      height: 270px;
    }

    @media print {
      #skills {
        display: none;
      }
    }

    .skills>.wrapper {
      display: flex;
      justify-content: space-between;
    }

    .skills>.wrapper> :first-child {
      margin-right: 24px;
    }

    .skills>.wrapper>#skills {}

    .skills>.wrapper>ul {
      color: #666;
    }

    .skills>.wrapper strong {
      color: #f60;
    }

    .skills>.wrapper>ul>li {
      line-height: 1.2;
      margin-bottom: 8px;
    }
  </style>
  <style>
    .openSource {}

    .openSource>h2 {}

    .openSource header img {
      position: absolute;
      top: 0;
      right: 0;
    }

    .openSource>ul {}

    .openSource>ul>li {
      margin-bottom: 24px;
    }

    .openSource header {
      position: relative;
      display: flex;
      justify-content: space-between;
    }

    .openSource h3 {}
  </style>
  <style>
    .jobs>ol>li {
      margin: 12px 0;
    }

    .jobs header {
      display: flex;
      color: #666;
      margin-bottom: 12px;
    }

    .jobs header>h3 {
      font-size: 18px;
      color: #333;
    }

    .jobs header>h4 {
      margin-left: 1em;
      font-size: 18px;
    }

    .jobs header>span {
      font-size: 18px;
      margin-left: auto;
    }
  </style>

  <style>
    @media (max-width: 500px) {
      body {
        margin: 0;
      }

      article {
        width: auto;
        height: auto;
      }

      .bio img {
        display: none;
      }

      .skills .wrapper {
        flex-direction: column;
      }

      #skills {
        width: auto;
      }

      .jobs header {
        flex-direction: column;
      }

      .jobs header>h3,
      .jobs header>h4,
      .jobs header>span {
        margin: 0;
      }

      .imgSize {
        display: none;
      }
    }
  </style>
</head>

<body>
  <article>
    <section class="bio">
      <h1>王波</h1>
      <p>男 | 27岁 | 江苏盐城 | 手机/微信：188-5273-4557 | 邮箱：bbw1996@qq.com</p>
      <p>
        语雀：<a href="https://www.yuque.com/bobolife/share"
          style="color: rgb(91, 150, 123)">https://www.yuque.com/bobolife/share</a>
      </p>
      <p>
        GitHub: <a href="https://github.com/BOBOlife" style="color: rgb(91, 150, 123)">https://github.com/BOBOlife</a>
      </p>

    </section>

    <section class="education">
      <h2>教育经历</h2>
      <p>
        <span><time>2015年</time>~<time>2019年</time></span>
        扬州大学 本科 电子信息工程专业
      </p>
    </section>
    <section class="skills">
      <h2>专业技能</h2>
      <div class="wrapper">
        <ul>
          <li>熟练掌握 HTML5、CSS3 以及常用的<strong>响应式布局</strong>、<strong>移动端布局</strong>方案, 熟练编写<strong>语义化</strong>页面</li>
          <li>熟练掌握 JavaScript、TypeScript，熟悉 ES6，包括 let / const / Promise / await / 析构赋值</li>
          <li>熟练掌握 Vue2.x/3.x、VueRouter、Vuex 等<strong>Vue全家桶</strong>，熟悉Vue原理，有阅读过部分源码</li>
          <li>
            熟悉 <strong>React全家桶</strong>的使用，包括
            create-react-app、ReactRouter、<strong>Redux</strong>、常用<strong>Hooks</strong>
            API的使用等
          </li>
          <li>
            熟悉<strong>前后端分离</strong>技术，包括DOM、AJAX、跨域、闭包（Closure）、<strong>原型链</strong>、this、面向对象等
          </li>
          <li>熟悉前端工程化，熟悉 Webpack、Vite ，Rollup等构建工具，有一定的应用及思考</li>
          <li>熟练掌握 iViewUI、ElementUI、AntDesign、VantUI 等业界UI框架以及周边生态应用</li>
          <li>
            熟悉 <strong>原生小程序</strong>、<strong>uni-app</strong> 开发，能独立完成小程序和移动端app的项目框架搭建、开发、测试及部署;
          </li>
          <li>熟悉 模块化规范、CSS预处理器、数据可视化、性能优化，在实际开发中落地并实现</li>
          <li>
            熟悉 Node.js，了解常用的 Node 模块
          </li>
        </ul>
      </div>
    </section>
    <section class="projects">
      <h2>项目经历</h2>
      <ol>
        <li>
          <header>
            <h3>用钢清</h3>
            <span style="padding-top: 2px;">
              苏州天保供应链信息技术服务有限公司
            </span>
          </header>
          <p>
          <div style="word-wrap: break-word;">
            <h4>技术栈：</h4>Vue2.7/Webpack/SCSS/Echarts/Vuex/VueRouter/iView/VantUI/原生小程序

          </div>
          </p>
          <p>
          <h4>项目介绍：</h4>
          此业务系统分为web端和小程序端，为贸易和物流等业务流程赋能，可以快速进行资源等整合推送处理，涵盖销售订单、出入库、提单、物流、财务，数据可视报表等等业务场景，面向B端用户在钢铁贸易垂直领域打造平台化的数字解决方案，为企业业务流转赋能。
          </p>
          <p>
          <h4>项目内容：</h4>

          <div>
            1.<strong>web端</strong>管理后台系统，对系统进行了<strong>性能优化</strong>，通过Webpack分包、懒加载、代码分割、开启HTTP/2、Gzip压缩、使用HTTP缓存、使用
            CDN等优化手段，LCP从13.1s优化到1.9s。
          </div>
          <div>
            2.手写deploy shell脚本，实现自动打包上传推送，提升发版效率。
          </div>
          <div>
            3.组织前端Code Review ，整理前端规范并通过Eslint、Prettier、CommitLint等QA工具，保证前端代码质量。
          </div>
          <div>
            4.<strong>小程序端</strong>，采用原生微信小程序配合VantUI进行开发，组织架构升级，采用<strong>分包</strong>的形式，分包加载<strong>提高启动速度</strong>，将JavaScript升级到TypeScript，升级上线后无新Bug产生。
          </div>
          </p>
        </li>

        <li>
          <header>
            <h3>业务组件库</h3>
            <span style="padding-top: 2px;">
              苏州天保供应链信息技术服务有限公司
            </span>
          </header>
          <p>
          <h4>技术栈：</h4>Vue2.7/Webpack/SCSS/iViewUI/vxe-table
          </p>
          <p>
          <h4>项目介绍：</h4>
          为了应对外部项目的需求，满足快速定制化的交付任务，帮助其他公司快速推进钢贸领域数字化进程，从内部项目用钢清演化并独立出来，旨在快速搭建客户满意的产品，实现数字化定制。
          </p>
          <p>
          <h4>项目内容：</h4>
          <div>
            1.基于iView和vxe-table并进行二次开发，部署到通过Verdaccio建立的私有npm上，组件库覆盖95%以上的管理后台业务线。
          </div>
          <div>
            2.设计并开发RequestTable业务组件和RequestForm业务组件，采用<strong>JSON配置化设计</strong>，表格表单组合场景下组件覆盖率高，通过<strong>表驱动</strong>的方式，开发时间从半天降低至半小时,提升开发效率。
            <div>
            </div>
          </div>
          <div>
            3.设计并开发Table-v2表格组件、Form-v2表单组件、ModalForm对话框表单组件，采用JSON配置化设计, 对原有的组件进行更贴合业务的二次封装，开发效率提高至少40%。
          </div>
          <div>
            4.设计并开发Select-v2虚拟选择器组件，支持十万条以上的数据载入，<strong>解决Select组件性能瓶颈</strong>问题。
          </div>
          <div>
            5.参与编写完整组件库文档，组件库文档的组件覆盖率超过95%。
          </div>
          </p>
        </li>

        <li>
          <header>
            <h3>游戏资源网</h3>
            <span style="padding-top: 2px;">上海游迅信息科技有限公司</span>
          </header>
          <p>
          <h4>技术栈:</h4>React/React Router/Mobx/Webpack/自定义Hooks/styled-components</p>
          <p>
          <h4>项目介绍：</h4>此项目分成移动端和PC端，均是主以内容展示为主。项目均使用react进行开发。
          </p>
          <p>
          <h4>个人职责：</h4><strong>独立负责</strong>移动端的开发，使用React,webpack
          等库来开发，从零搭建项目，实现搜索，筛选，下载，markdown编辑，发布等功能；PC端负责主要页面的开发，首页，标签页，详情页，排行页等。
          封装分页组件，轮播组件等
          </p>
        </li>
      </ol>
    </section>
    <section class="openSource">
      <h2>开源项目</h2>
      <ul>
        <li>
          <header>
            <h3>mini-vue-core</h3>
            <span>
              <a href="https://github.com/BOBOlife/mini-vue-core">源码链接</a>
            </span>
          </header>
          <p>
          <h4>技术栈：</h4>Javascript/Typescript/Vitest/TDD/Rollup/Monorepo
          </p>
          <p>
          <h4>项目介绍：</h4>
          该项目主要是为了帮助大家学习Vue3源码而进行开发，项目结构上的使用<strong>Monorepo</strong>进行管理，配合<strong>vitest</strong>，使用<strong>TDD</strong>的手法进行开发和重构，实现了<strong>reactivity</strong>、runtime-core、runtime-dom、comilper-core等核心模块
          </p>

        </li>
      </ul>
    </section>
    <section class="jobs">
      <h2>工作经历</h2>
      <ol>

        <li>
          <header>
            <h3>苏州天保供应链信息技术服务有限公司</h3>
            <h4>前端开发工程师</h4>
            <span><time>2021年3月</time>~<time>2023年11月</time></span>
          </header>
          <ul>
            <li>
              <h4>公司项目：</h4>钢贸清，组件库，快钢电商网等等
            </li>
            <li>
              <h4>个人职责：</h4>
              负责公司内部产品开发和前端的建设，主要负责用钢清的开发与维护，并协助开发业务组件库的部分功能和文档撰写,
              此外还有参与其他组uniapp的移动app的开发；积极在公司内部技术分享,参加前端组内的技术研讨会，有过多次的技术分享经验，带过团队新成员，对其进行过技术培训。
            </li>
          </ul>
        <li>
          <header>
            <h3>上海游讯信息科技有限公司</h3>
            <h4>前端开发工程师</h4>
            <span><time>2019年11月</time>~<time>2021年1月</time></span>
          </header>
          <ul>
            <li>
              <h4>公司项目：</h4>游戏资源网（移动端+PC端）
            </li>
            <li>
              <h4>个人职责：</h4>独立负责游戏网站的移动端页面开发，协同开发PC端，后台管理系统主要参与维护工作。
            </li>
          </ul>
        </li>
      </ol>
    </section>

    <section class="others">
      <h2>个人优势</h2>
      <ul>
        <li>github上参与开源项目，提交PR，曾为uView2.0(1.3k star)和Workflow（1.3k star）贡献过代码</li>
        <li>对软件设计（Figma）有经验，编码有着良好的协管和自我解决问题的能力</li>
      </ul>
    </section>
  </article>
</body>

</html>